<script setup>
import { ref, reactive, toRef, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import MyIcon from '@/components/my-icon/index.vue'
import customerModel from '@/pages/wework/groupManagement/component/customerModel.vue'
import customerTagModel from '@/pages/wework/groupManagement/component/customerTagModel.vue'
import groupLabelsModel from '@/pages/wework/groupManagement/component/groupLabelsModel.vue'
import custormerDrawer from '@/pages/wework/groupManagement/component/custormerDrawer.vue'
import { toRaw } from '@vue/reactivity'
import {postGroupBatch,postGroupList2,postGroupSync} from '@/api'
import ChooseDialogue from '@/components/app/chooseDialogue.vue'
import labels from '@/components/app/label.vue'
import { get } from '@vueuse/shared'
const ruleFormRef = ref()
const dialogVisible = ref(false)
const multipleTableRef = ref()
const ruleForm = reactive({
	groupName: '',
	grouper: '',
	groupTag: '',
	sort: 'desc',
	date: [],
	status: ''
})
const TestRef1 = ref(null)
const tagData = ref([])
const labeldataapi1=(val)=>{
var arr = []
val.list.forEach(item=>{
	arr.push(toRaw(item))
})
tagData.value = arr
}
const showLabels = () => {

		var data = {
			show:true,
			type:1,
		title:'批量打群标签',
		tips:'将给满足条件的客户批量打标签，请选择标签',
		tipsshow:true,
		}
  	TestRef1.value.tableshow(data)
		

}


const isRefresh = ref(true)
const handleRefresh = () => {
  isRefresh.value = false
  isRefresh.value = true
}
const staffData = ref([])
const chooseStaff = () => {
  dialogVisible.value = true
  chooseDialogue.value.show('staff', staffData.value)
}
const getChooseData = (val) => {
  console.log(val, '数据回显')
  staffData.value = val
  handleRefresh()
}
const chooseDialogue = ref(null)

const  TestRef = ref(null)
const tableData = ref([])
const total = ref(0)
const page = ref(1)
const clientNum = ref(0)
const isLoading = ref(false)
const getSync = ()=>{
	console.log('asdasdasdasd')
	isLoading.value = true
	// const loading = $loading({
  //         lock: true,
  //         text: 'Loading',
  //         spinner: 'el-icon-loading',
  //         background: 'rgba(0, 0, 0, 0.7)'
  //       });
	postGroupSync({}).then((res) => {
		ElMessage.success('同步成功')
		getData(1)
		// loading.close();
		isLoading.value = false
	})
}
const getData = (val)=>{
	if (val) page.value = val
	var tags = []
	tagData.value.forEach(item=>{
		tags.push(item.tag_id)
	})
	var staff = []
		staffData.value.forEach(item=>{
		staff.push(item.id)
	})
	var json  = {
		page:page.value,size:10,
		tags:tags,staff:staff,
		name:ruleForm.groupName,
		status:ruleForm.status,
		order:ruleForm.sort,
		times:ruleForm.date||[]
	}
	
	postGroupList2(json).then((res) => {
			total.value = res.data.count
			clientNum.value = res.data.group_szie
			tableData.value = res.data.item
	})
} 
getData()
const custormerDrawerRef = ref(null)
const drawer = ref(false)
const multipleSelection = ref([])
const Route = useRoute()
const router = useRouter()

const conditionList = ref([
	{
		title: '群内总人数排名',
		value: 1
	},
	{
		title: '入群人数排名',
		value: 2
	},
	{
		title: '退群人数排名',
		value: 3
	},
	{
		title: '创群时间',
		value: 4
	}
])
const rowClick = (row, column, event) => {
	drawer.value = true
	custormerDrawerRef.value.show(row.chat_id)
}
const changeDrawer = (visible) => {
	drawer.value = visible
}


const addlabel = () => {
	if (multipleSelection.value.length > 0) {
		var data = {
			show:true,
			type:1,
		title:'批量打群标签',
		tips:'将给满足条件的客户批量打标签，请选择标签',
		tipsshow:true,
		}
  	TestRef.value.tableshow(data)
		
	} else {
		ElMessage.error('请确保至少选中一个群后再进行批量打群标签操作')
	}
}
const labeldataapi=(val)=>{
	console.log(multipleSelection.value)
	var ids = []
	for(var i = 0;i<multipleSelection.value.length;i++){
		ids.push(multipleSelection.value[i].chat_id)
	}
	var tags = []
		val.list.forEach(item=>{
			tags.push(item.tag_id)
		})

	postGroupBatch({chatIds:ids,tags:tags}).then(res=>{

		ElMessage({
			message: '添加成功',
			type: 'success',
		})
		getData()
	})
	

}
const tagCheck = (visible) => {
	tagVisible.value = visible
}
const changeDialogVisible = (visible) => {
	console.log(visible)
	dialogVisible.value = visible
}
const handleSelectionChange = (val) => {
	multipleSelection.value = val
}
const resetForm = (formEl) => {
	ruleForm.groupName = ''
	ruleForm.status = ''
	ruleForm.sort = 'desc'
	ruleForm.date = []

	tagData.value = []
	staffData.value = []
}
</script>
<template>
	<div class="container" v-loading="isLoading">
		<div class="input-group">
			<el-form :inline="true" label-width="119px" ref="ruleFormRef" :model="formInline" class="demo-form-inline">
				<el-form-item class="input-item" label="群主:">
				<span v-if="isRefresh">
  <span @click="chooseStaff" class="app-flex-2 app-choose-staff" v-if="staffData.length>2">
<span class="app-flex-left">
  <el-avatar v-if="staffData[0].avatar" class="cho-margin" shape="square" :size="30" :src="staffData[0].avatar" />
  <span>{{ staffData[0].name }}等{{staffData.length}}个账号</span>
</span>
<el-icon>
  <ArrowDown />
</el-icon>
  </span>
  <span @click="chooseStaff" class="app-flex-2 app-choose-staff" v-else>
	<span class="app-flex-left" v-for="(item,index) in staffData" :key="index">
  <el-avatar v-if="item.avatar" class="cho-margin" shape="square" :size="30" :src="item.avatar" />
  <span>{{ item.name }}</span>
</span>
<!-- <span style="border:1px solid #e4e7ed"> -->
<span v-if="staffData.length==0" >选择群主</span>
<el-icon>
  <ArrowDown />
</el-icon>
<!-- </span> -->
  </span>
</span>



<ChooseDialogue :dialogVisible="dialogVisible" @getChooseData="getChooseData($event, val)" ref="chooseDialogue" />
				</el-form-item>
				<el-form-item class="input-item" label="群名称：">
					<el-input
						v-model="ruleForm.groupName"
						class="w-50 m-2"
						placeholder="请输入要搜索的群名称"
						:suffix-icon="Search"
					/>
				</el-form-item>
				<el-form-item class="input-item" label="群标签：">
				 <span v-if="isRefresh">
				 <span @click="showLabels" class="app-flex-2 app-choose-staff" v-if="tagData.length>1">
  <span class="app-flex-left">
    
    <span>{{ tagData[0].name }}等{{tagData.length}}个标签</span>
  </span>

  <el-icon>
    <ArrowDown />
  </el-icon>
</span>
<span @click="showLabels" class="app-flex-2 app-choose-staff" v-else>
  <span class="app-flex-left" v-for="(item,index) in tagData" :key="index">
    <span>{{ item.name }}</span>
  </span>
  <span v-if="tagData.length==0">选择标签</span>
  <el-icon>
    <ArrowDown />
  </el-icon>
</span>
  </span>

				</el-form-item>
				<!-- 第二行表单 -->
				<!-- <el-form-item class="input-item" label="排序条件:">
					<el-select v-model="ruleForm.condition" placeholder="请选择" clearable>
						<el-option v-for="item in conditionList" :label="item.title" :value="item.value" />
					</el-select>
				</el-form-item> -->
				<el-form-item class="input-item" label="排序方式：">
					<el-select v-model="ruleForm.sort" placeholder="请选择" clearable>
						<el-option label="降序" value="desc" />
						<el-option label="升序" value="asx" />
					</el-select>
				</el-form-item>
				<el-form-item class="input-item">
					<template #label
						>选择日期
						<el-tooltip content="仅支持查看2021-01-10之后的数据" placement="top" effect="light">
							<MyIcon class="total-question" name="Question" />
						</el-tooltip>
						：</template
					>
					<el-date-picker v-model="ruleForm.date" value-format="YYYY-MM-DD"
	format="YYYY-MM-DD" type="date" placeholder="选择日期" clearable />
				</el-form-item>
				<el-form-item class="input-item" label="群聊状态:">
					<el-select v-model="ruleForm.status" placeholder="请选择" clearable>
						<el-option label="未解散" :value="0" />
						<el-option label="已解散" :value="1" />
					</el-select>
				</el-form-item>
				<el-form-item class="form-btn">
				<el-button class="big-btn" type="primary" @click="getData(1)">搜索</el-button>
					<el-button class="big-btn" @click="resetForm(ruleFormRef)">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="customer-table">
			<div class="customer-table-header">
				<div class="customer-table-header-title">
					<span>共{{total}}个群，{{clientNum}}个客户</span>
					<el-divider class="line" direction="vertical" />
					<div  @click="getSync"	 class="table-refresh app-pointer"><MyIcon v-loading.fullscreen.lock="isLoading" class="icon-refresh" name="Refresh" /> 更新数据</div>
				</div>
				<div class="customer-table-header-btn">
					<el-button color="#1890ff" @click="addlabel" size="large" plain>批量打群标签</el-button>
					<!-- <el-button color="#1890ff" size="large" plain>导出Excel</el-button> -->
				</div>
			</div>
		</div>
		<el-table
			@row-click="rowClick"
			ref="multipleTableRef"
			:data="tableData"
			style="width: 100%"
			@selection-change="handleSelectionChange"
		>
			<el-table-column type="selection" width="55" />
			<el-table-column fixed label="群名称" width="180">
				<template #default="scope">
					<div class="owner-name">
						<img
							class="owner-img"
							src="../../../assets/img/img/avatar-room-default.67bead38e751.svg"
							alt=""
						/>
						<span style="margin-left: 10px">{{ scope.row.name }}</span>
					</div>
				
				</template>
			</el-table-column>

			<el-table-column label="群主">
				<template #default="scope">
						<div class="app-words-box">
								<div class="app-flex-left">
									<MyIcon class="app-down-icon primary-font" name="Person" />
									<span class="app-gap-words-left-xs">{{ scope.row.staff.name }}</span>
								</div>
							</div>
				</template>
			</el-table-column>
			<el-table-column property="staff.department" label="群主所属部门" width="220" />
			<el-table-column label="群标签" width="220">
				<template #default="scope">
				
					 <el-tag class="app-br-10" v-for="(item,index) in scope.row.tags" :key="index">
                  <span class="app-regular-font ">{{item.name}}</span>
                  </el-tag>
				</template>
			</el-table-column>
			<el-table-column property="size" label="群人数" width="120" />
			<!-- <el-table-column property="size" label="当日群人数" width="120" /> -->
			<el-table-column property="day_add" label="当日入群" width="120" />
			<el-table-column property="day_del" label="当日退群" width="120" />
			<el-table-column property="create_time" label="创群时间" width="180" />
			<!-- <el-table-column property="chat_id" label="群ID" width="320" /> -->
			<el-table-column label="操作" align="right">
				<template #default="scope">
						<span class="app-primary-font app-pointer" @click="rowClick(scope.row)">详情</span>
					</template>
			
			</el-table-column>

		</el-table>
		<el-pagination style="display: flex;justify-content: center;margin-top:10px;margin-bottom:10px" :current-page="page" class="app-page" @current-change="getData" background layout="prev, pager, next" :total="total" />
		<custormerDrawer ref="custormerDrawerRef" :drawer="drawer" @changeDrawer="changeDrawer" />
	
	
		<!-- <customerModel @changeDialogVisible="changeDialogVisible" :dialogVisible="dialogVisible" /> -->
		<labels ref="TestRef" :labeldataapi="labeldataapi"  ></labels>
		<labels ref="TestRef1" :labeldataapi="labeldataapi1"></labels>
	
	</div>
</template>

<style lang="scss" scoped>
	@import url('../../../style/app-component.scss');
.container {
	padding: 16px;
	overflow-y: auto;
	-webkit-box-flex: 1;
	flex: 1;
	:deep(.el-table tr) {
		cursor: pointer;
		background-color: #fff;
	}
	// :deep(.el-table tr:hover) {
	// 	background-color: #69c0ff;
	// }
	.input-group {
		position: relative;
		display: flex;
		-webkit-box-pack: justify;
		justify-content: space-between;
		margin-bottom: 16px;
		padding: 16px 24px 16px 0px;
		background-color: #fff;
		flex-shrink: 0;
		.form-btn {
			position: absolute;
			right: 0;
			bottom: 24px;
			.big-btn {
				width: 92px;
				height: 36px;
			}
		}
		.input-item {
			margin-left: 24px;
		}
		.total-question {
			margin: 10px 2px 0 2px;
		}
	}
	.gray-broder {
		width: 68px;
		height: 28px;
		padding: 3px 7px;
		border: 1px solid #d9d9d9;
		border-radius: 2px;
		font-size: 13px;
	}
	.tag {
		background-color: #fafafa;
		padding: 0 11px;
		min-width: 52px;
		max-width: 112px;
		line-height: 26px;
		color: #595959;
		font-size: 14px;
		border: 1px solid #d9d9d9;
		border-radius: 2px;
	}
	.owner-name {
		display: flex;
		align-items: center;
		// padding: 3px 7px;

		.people-icon {
			color: #7ea4d1;
		}
		.owner-img {
			width: 36px;
			height: 36px;
		}
		// width: 58px;
		// height: 28px;
	}
	.customer-table {
		padding: 16px 28px;
		background-color: #fff;
		.customer-table-header {
			display: flex;
			justify-content: space-between;
			.customer-table-header-btn {
				:deep(.el-button:focus) {
					background-color: #fff;
					color: #1890ff;
				}
				:deep(.el-button:hover) {
					background-color: #e3f6ff;
					color: #1890ff;
				}
			}
			.customer-table-header-title {
				display: flex;
				align-items: center;
				font-size: 14px;
				font-weight: 600;
				color: rgba(18, 18, 22, 0.85);
				.line {
					margin: 0 11px;
				}
				.table-refresh {
					display: flex;
					align-items: center;
					font-size: 13px;
					font-weight: 500;
					color: rgba(0, 0, 0, 0.45);
					.icon-refresh {
						margin-right: 3px;
						transform: rotateY(180deg);
					}
				}
			}
		}
	}
}
</style>
